<template>
  <div v-title :data-title="'专家-' + expert.expertName">
<!--  <div v-title :key="componentKey">-->
    <div id="main">
      <div class="container">
        <div class="detail-wrapper">

          <div class="detail-nav clearfix">
            <div class="detail-nav-wrapper fixed">

              <!--白色卡片-->
              <div class="expert-nav-box">
                <div class="introduce">
                  <div class="introduce-avatar">
                    <img :src="'api/img/expert/'+ expert.expertId +'.png'"
                         class="expert-avatar">
                    <span v-if="$store.state.user.permission>=3&&editMode!=='editing'" class="modify"
                          @click="toggleUploadPhotoShow">修改</span>
                    <UploadImage :params="{expertId:expert.expertId}" :upload-photo="this.uploadPhoto"
                                 :url="'./api/expert/uploadPhoto'" @change="reloadPhoto"/>
                  </div>
                  <div class="introduce-info">
                    <!--<p class="name" v-text="expert.expertName"></p>-->
                    <div class="apply-control">
                      <div v-if="!expert.favorite" class="white-button button" @click="addFavorite(expert)">添加收藏</div>
                      <div v-if="expert.favorite" class="blue-button button" @click="removeFavorite(expert)">取消收藏</div>
                      <div v-if="!expert.preselect" class="white-button button" @click="addPreselect(expert)">添加预选</div>
                      <div v-if="expert.preselect" class="blue-button button" @click="removePreselect(expert)">取消预选
                      </div>
                    </div>
                  </div>
                </div>

              </div>

              <div class="navigater">
                <p :class="{'active':activeNav===0}" class="detail-nav-item" @click="scrollToLinkTitle(0)">
                  <span class="circle"></span>
                  <span class="line"></span>
                  <span class="text">专长领域</span>
                </p>
                <p :class="{'active':activeNav===1}" class="detail-nav-item" @click="scrollToLinkTitle(1)">
                  <span class="circle"></span>
                  <span class="line"></span>
                  <span class="text">基本信息</span>
                </p>
                <p :class="{'active':activeNav===2}" class="detail-nav-item" @click="scrollToLinkTitle(2)">
                  <span class="circle"></span>
                  <span class="text">参会情况</span>
                </p>
              </div>

              <div v-if="$store.state.user.permission>=3" class="edit-button-wrapper">
                <el-button v-if="editMode!=='editing'" type="myBlue" @click="startEdit">开启修改</el-button>
                <el-button v-if="editMode==='editing'" type="success" @click="SubmitEdit">提交修改</el-button>
                <el-button v-if="editMode==='editing'" type="info" @click="cancelEdit">取消修改</el-button>
              </div>
            </div>

          </div>


          <div class="detail-info clearfix" ref="detail-info" :key="componentKey">
            <!-- 专家名字 v-text="expert.expertName"-->
            <div v-if="editMode!=='editing'" class="name" v-html="expert.expertName"></div>
            <el-input
                v-if="editMode==='editing'"
                v-model="expert.expertName"
                style="width: 800px;margin-bottom: 20px">
              <template slot="prepend">专家姓名</template>
            </el-input>

            <div class="detail-info-item detail-info-major">
              <p class="title">专长领域</p>

              <div class="information">
                <p class="label-p">专业领域</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.domain.domainName||'-'"></span>
                <span v-if="editMode==='editing'" class="info-span">
                  <DomainSelector :item="expert"></DomainSelector>
                </span>
              </div>

              <div class="information">
                <p class="label-p">精专方向</p>

                <span v-if="expert.directions.length<=0" v-show="editMode!=='editing'" class="info-span">-</span>
                <span v-else v-show="editMode!=='editing'" class="info-span">
                  <span v-for="(direction,index) in expert.directions" :key="direction.directionId">
                    <span v-if="index!==expert.directions.length-1">{{ direction.directionName }}、</span>
                    <span v-else>{{ direction.directionName }}</span>
                  </span>
                </span>

                <span v-if="editMode==='editing'" class="info-span">
                  <DirectionSelector :item="expert"></DirectionSelector>
                </span>
              </div>

            </div>

            <div class="detail-info-item detail-info-base">
              <p class="title">基本信息</p>

              <div class="information">
                <p class="label-p">性别</p>

                <span v-show="editMode!=='editing'" class="info-span" v-text="expert.gender||'-'">-</span>
                <el-select v-if="editMode==='editing'" v-model="expert.gender" class="info-span" placeholder="请选择性别">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </div>

              <div class="information">
                <p class="label-p">年龄</p>

                <span v-if="expert.birthYear>0" class="info-span"
                      v-text="new Date().getFullYear() - parseInt(expert.birthYear) +'岁（'+expert.birthYear+'年出生）'"></span>
                <span v-else class="info-span">-</span>

                <el-input v-if="editMode==='editing'" v-model="expert.birthYear" class="info-span">
                  <template slot="prepend">出生年【4位数字】</template>
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">常驻地区</p>

                <span v-if="expert.province===expert.city" class="info-span"
                      v-text="expert.country +'/'+ expert.city"></span>
                <span v-else class="info-span" v-text="expert.country +'/'+ expert.province +'/'+ expert.city"></span>
                <span v-if="editMode==='editing'" class="info-span">
                  <AddressSelector :item="expert"></AddressSelector>
                </span>
              </div>

              <div class="information">
                <p class="label-p">单位职务</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.currentPost||'-'"></span>
                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.currentPost"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    label="单位职务"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">社会兼职</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.concurrentPost||'-'"></span>
                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.concurrentPost"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    label="社会兼职"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">专家类别</p>

                <span v-if="expert.categories.length<=0" v-show="editMode!=='editing'" class="info-span">-</span>
                <span v-else v-show="editMode!=='editing'" class="info-span">
                  <span v-for="(category,index) in expert.categories" :key="category.categoryId">
                    <span v-if="index!==expert.categories.length-1">{{ category.categoryName }}、</span>
                    <span v-else>{{ category.categoryName }}</span>
                  </span>
                </span>

                <span v-if="editMode==='editing'" class="info-span">
                  <CategorySelector :item="expert"></CategorySelector>
                </span>

              </div>

              <div class="information">
                <p class="label-p">职务职称</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.title||'-'"></span>

                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.title"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">执业资格</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.qualification||'-'"></span>

                <el-input v-if="editMode==='editing'"
                          v-model="expert.qualification"
                          :autosize="{ minRows: 5}"
                          class="info-span"
                          type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">头衔荣誉</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.honor||'-'"></span>

                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.honor"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">其他荣誉</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.otherHonor||'-'"></span>

                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.otherHonor"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">教育背景</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.educational||'-'"></span>

                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.educational"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">工作经历</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.workExperience||'-'"></span>

                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.workExperience"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>


              <div class="information">
                <p class="label-p">项目经验</p>

                <span v-if="editMode!=='editing'" class="info-span" v-text="expert.projectExperience||'-'"></span>

                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.projectExperience"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">著作/论文</p>

                <span v-if="editMode!=='editing'"
                      class="info-span"
                      v-text="expert.papers||'-'"></span>

                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.papers"
                    :autosize="{ minRows: 5}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">官网简介</p>

                <span v-if="expert.website.split('\n').length===0" class="info-span">-</span>
                <span v-for="child in expert.website.split('\n')" :key="child" class="info-span">
                  <span class="info-link" @click="goToLink(child,'http')" v-text="child"></span>
                </span>
                <span v-if="editMode==='editing'" class="info-span">
                  <MultipleWebsiteEditor :item="expert"></MultipleWebsiteEditor>
                </span>
              </div>

              <div class="information">
                <p class="label-p">电话号码</p>

                <span v-if="editMode!=='editing'"
                      class="info-span"
                      v-text="expert.telephone||'-'"></span>
                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.telephone"
                    :autosize="{ minRows: 3}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>

              <div class="information">
                <p class="label-p">邮箱</p>

                <span v-if="editMode!=='editing'"
                      class="info-span"
                      v-text="expert.email||'-'"></span>
                <el-input
                    v-if="editMode==='editing'"
                    v-model="expert.email"
                    :autosize="{ minRows: 3}"
                    class="info-span"
                    type="textarea">
                </el-input>
              </div>
            </div>

            <div class="detail-info-item detail-info-meeting">
              <p class="title">参会情况</p>

              <MeetingEditor
                  v-if="showDialog"
                  ref="meetingEditor"
                  :dialog-title="dialogTitle"
                  :item-info="meetingItem"
                  @closeDialog="closeDialog"
              ></MeetingEditor>

              <div class="information">
                <p class="label-p">指挥部内部会议
                  <!-- 管理员操作按钮 -->
                  <br>
                  <el-button v-if="$store.state.user.permission>=3&&editMode==='editing'" size="mini" type="success"
                             @click="addMeeting(expert.internalMeeting)">新增
                  </el-button>
                </p>

                <span v-if="expert.internalMeeting.length===0" class="info-span">-</span>
                <span v-for="(child, index) in expert.internalMeeting" v-else :key="'指挥部内部会议'+index" :class="{'edit-project': $store.state.user.permission>=3&&editMode==='editing'}"
                      class="info-span">
                  <span class="info-link" @click="goToLink(child.url,child.urlType)">
                    <i v-if="child.url" class='el-icon-link'></i><span v-text="child.name"></span>
                  </span>
                  <span v-text="child.remarks"></span>

                  <!-- 管理员操作按钮 -->
                  <span v-if="$store.state.user.permission>=3&&editMode==='editing'" style="float: right">
                    <br>
                    <el-button size="mini" type="danger"
                               @click="removeMeeting(expert.internalMeeting,index)">删除</el-button>
                    <el-button v-if="$store.state.user.permission>=3" size="mini" type="info"
                               @click.native.prevent="editMeeting(expert.internalMeeting,index,child)">修改</el-button>
                  </span>
                </span>
              </div>


              <div class="information">
                <p class="label-p">其他评审会
                  <!-- 管理员操作按钮 -->
                  <br>
                  <el-button v-if="$store.state.user.permission>=3&&editMode==='editing'" size="mini" type="success"
                             @click="addMeeting(expert.otherMeeting)">新增
                  </el-button>
                </p>

                <span v-if="expert.otherMeeting.length===0" class="info-span">-</span>
                <span v-for="(child, index) in expert.otherMeeting" v-else :key="'其他评审会'+index" :class="{'edit-project': $store.state.user.permission>=3&&editMode==='editing'}"
                      class="info-span">
                  <span class="info-link" @click="goToLink(child.url,child.urlType)">
                    <i v-if="child.url" class='el-icon-link'></i><span v-text="child.name"></span>
                  </span>
                  <span v-text="child.remarks"></span>

                  <!-- 管理员操作按钮 -->
                  <span v-if="$store.state.user.permission>=3&&editMode==='editing'" style="float: right">
                    <br>
                    <el-button size="mini" type="danger"
                               @click="removeMeeting(expert.otherMeeting,index)">删除</el-button>
                    <el-button v-if="$store.state.user.permission>=3" size="mini" type="info"
                               @click.native.prevent="editMeeting(expert.otherMeeting,index,child)">修改</el-button>
                  </span>
                </span>
              </div>
            </div>

          </div>
        </div>
      </div>
      <ToTop></ToTop>
      <HighLight :highlightShow.sync="highlightShow" @highlight="highlight" @cancelHighlight="cancelHighlight" ></HighLight>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
// import Header from '@/components/Header'
import Footer from "@/components/Footer";
import ToTop from "@/components/ToTop";
import UploadImage from "@/components/UploadImage";
import AddressSelector from "@/components/Admin/AddressSelector";
import DomainSelector from "@/components/Admin/DomainSelector";
import DirectionSelector from "@/components/Admin/DirectionSelector";
import CategorySelector from "@/components/Admin/CategorySelector";
import MultipleWebsiteEditor from "@/components/Admin/MultipleWebsiteEditor";
import MeetingEditor from "@/components/Admin/MeetingEditor";
import HighLight from "@/components/HighLight";

export default {
  name: "ExpertInfo",
  data() {
    return {
      //搜索内容高亮
      componentKey: 0,//刷新组件
      highlightText: this.$route.query.highlightText,
      highlightShow: {
        showSwitch: true,
        showHighLight: true
      },

      activeNav: 0,// 高亮显示的锚点下标
      id: this.$route.query.id,
      editMode: this.$route.query.editMode,
      uploadPhoto: {
        show: false,
      },
      expert: {
        birthYear: 0,
        categories: [],
        city: "",
        concurrentPost: "",
        country: "中国",
        currentPost: "",
        directions: [],
        domain: {domainId: -1, domainName: "其它", count: 0},
        educational: "",
        email: "",
        expertId: 0,
        expertName: "专家名字",
        favorite: false,
        favorsNum: 0,
        gender: "男",
        honor: "",
        internalMeeting: [{name: "指挥部内部会议", remarks: "", url: "", urlType: "smb"}],
        otherHonor: "",
        otherMeeting: [{name: "其他评审会", remarks: "", url: "", urlType: "smb"}],
        papers: "",
        preselect: false,
        projectExperience: "",
        province: "",
        qualification: "",
        telephone: "",
        title: "",
        visitsNum: 0,
        website: "",
        workExperience: ""
      },
      //会议修改弹框
      showDialog: false,
      dialogTitle: "新增会议",
      meetingItem: {
        name: "",
        remarks: "",
        url: "",
        urlType: "smb"
      },

    }
  },
  mounted() {
    this.$nextTick(
        () => {
          // 监听页面滚动事件
          window.addEventListener("scroll", this.scroll);
          // window.addEventListener("resize", this.resize);
        }
    )
  },
  methods: {
    // 新增-弹框组件
    addMeeting(meetings) {
      this.meetingItem = {
        name: "",
        remarks: "",
        url: "",
        urlType: "smb"
      };
      this.dialogTitle = "新增会议";
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs["meetingEditor"].showDialog = true;
        this.$refs["meetingEditor"].meetings = meetings;
        this.$refs["meetingEditor"].index = -1;
      });
    },
    // 编辑-弹框组件
    editMeeting(meetings, index, meetingItem) {
      this.meetingItem = meetingItem;
      this.dialogTitle = "编辑会议";
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs["meetingEditor"].showDialog = true;
        this.$refs["meetingEditor"].meetings = meetings;
        this.$refs["meetingEditor"].index = index;
      });
    },
    // 删除
    removeMeeting(list, index) {
      if (index !== -1) {
        list.splice(index, 1)
      }
    },
    // 关闭弹框组件
    closeDialog(flag) {
      // flag=0 取消
      if (flag) {
        // 重新刷新表格内容
        //this.fetchData();
      }
      this.showDialog = false;
    },

    goToLink(url, startsWith) {
      if (url){
        if (startsWith === 'http') {
          if (!url.startsWith('http')) url = 'http://' + url;
        } else if (startsWith === 'smb') {
          url = startsWith + ':' + url;
        }
        // console.log(url)
        window.open(url, '_blank');//新窗口打开
        // document.location.href = url;
      }
    },
    startEdit() {
      this.forceRerender();
      this.editMode = 'editing';
    },
    cancelEdit() {
      this.editMode = undefined;
      // this.$router.push({path: '/Expert/Info', query: {id: this.id}})
      this.getInfoById();
    },
    SubmitEdit() {
      if (this.id <= 0) {
        this.$http.post('api/expert/add', this.expert).then(res => {
          //新增成功
          if (res.data.code === 200) {
            let id = res.data.data.expertId;
            this.$router.push({path: '/Expert/Info', query: {id: id}});
            this.editMode = '';
            this.$notify({
              title: '添加成功',
              type: 'success',
              offset: 200,
            });
            this.cancelEdit();
          }
        })
      } else {
        this.$http.post('api/expert/update', this.expert).then(res => {
          //修改成功
          if (res.data.code === 200) {
            let id = this.expert.expertId;
            this.$router.push({path: '/Expert/Info', query: {id: id}});
            this.editMode = '';
            this.$notify({
              title: '修改成功',
              type: 'success',
              offset: 200,
            });
            this.cancelEdit();
          }
        })
      }

    },
    toggleUploadPhotoShow() {
      this.uploadPhoto.show = !this.uploadPhoto.show;
    },
    reloadPhoto() {
      window.document.getElementsByClassName("expert-avatar").item(0).src = 'api/img/expert/' + this.expert.expertId + '.png?t=' + new Date().getTime();
    },

    getInfoById() {
      if (this.editMode === 'new') {
        this.expert.expertId = -1;
        this.startEdit();
      } else if (this.id > 0) {
        this.$http.get('api/expert/getById?expertId=' + this.id).then(res => {
          //if (res.data.code === '200') {
          this.expert = res.data.data;
          document.title = this.expert.expertName;
          if (this.editMode === 'edit') {
            this.startEdit();
          } else {
            this.$nextTick(()=> {
              this.highlight();
            })
          }
          //}
        })
            //.catch(function (err) {console.log(err);});
      }
    },
    addFavorite(expert) {
      this.$store.commit("addFavorite", ['expert', expert]);
    },
    removeFavorite(expert) {
      this.$store.commit("removeFavorite", ['expert', expert]);
    },
    addPreselect(expert) {
      this.$store.commit("addPreselect", ['expert', expert]);
    },
    removePreselect(expert) {
      this.$store.commit("removePreselect", ['expert', expert]);
    },
    //【锚点功能】
    scrollToLinkTitle(index) {
      // 获取含样式类 class="link_title" 的所有元素，得到一个数组（列表）
      let titleList = document.querySelectorAll('.detail-info-item')
      // offsetTop为元素顶部与整个文档顶部间的距离
      let offsetTop = titleList[index].offsetTop;
      // offset为平滑滚动结束后，元素顶部与显示屏顶部间的距离,默认为0，页面滚动到标题触顶
      let offset = 90
      offsetTop -= offset
      // scrollTop为显示屏顶部与整个文档顶部间的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      // 步长（时长500ms，每10ms一跳，共50跳）
      let step = Math.abs(offsetTop - scrollTop) / 20;
      if (offsetTop > scrollTop) {
        // offsetTop > scrollTop 时元素在显示屏下方时，滚动条需下滑
        // scrollTop需增加（offsetTop-scrollTop）
        smoothDown();
      } else {
        // offsetTop < scrollTop 时元素在显示屏上方时，滚动条需上滑
        // scrollTop需减少（scrollTop - offsetTop）
        smoothUp();
      }

      // 向上平滑滚动
      function smoothUp() {
        if (scrollTop > offsetTop) {
          scrollTop -= step;
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          setTimeout(smoothUp, 10);
        } else {
          document.body.scrollTop = offsetTop;
          document.documentElement.scrollTop = offsetTop;
        }
      }

      // 向下平滑滚动
      function smoothDown() {
        if (scrollTop < offsetTop) {
          scrollTop += step;
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          setTimeout(smoothDown, 10);
        } else {
          document.body.scrollTop = offsetTop;
          document.documentElement.scrollTop = offsetTop;
        }
      }
    },


    //页面滚动时触发【锚点高亮功能】
    scroll() {
      // scrollTop为显示屏顶部与整个文档顶部间的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      // 获取含样式类 class="link_title" 的所有元素，得到一个数组（列表）
      let titleList = document.querySelectorAll('.detail-info-item')
      // 将每个目标元素顶部与整个文档顶部的距离，以及显示屏顶部与整个文档顶部间的距离都存入到一个数组中
      let offsetTopList = [scrollTop]
      titleList.forEach(item => {
        offsetTopList.push(item.offsetTop - 30)
      })
      // 对数组进行排序（默认从小到大）
      offsetTopList.sort((a, b) => {
            return a - b;
          }
      )
      // 当第一个目标元素滚入屏幕后，查询当前滚动的位置在数组中的下标，对应的便是需高亮显示的锚点下标
      if (scrollTop >= offsetTopList[0]) {
        this.activeNav = offsetTopList.indexOf(scrollTop)
      }
    },

    getAllLeaf(node) {
      let result = [];
      function getLeaf(node) {
        if (node.children.length > 0) {
          for (const child of node.children) {
            getLeaf(child);
          }
          // node.children.forEach(child => {
          //  getLeaf(child);
          // });
        } else {
          result.push(node);
        }
      }
      getLeaf(node);
      return result;
    },
    //高亮
    highlight() {
      if (this.highlightText) {
        const result = this.getAllLeaf(this.$refs["detail-info"]);
        let reg = new RegExp(this.highlightText, "ig");
        for (const resultElement of result) {
          resultElement.innerHTML = resultElement.innerHTML.replace(reg, '<highlight>$1</highlight>');
        }
      }
    },
    //取消高亮
    cancelHighlight() {
      this.forceRerender()
      /*const result = this.getAllLeaf(this.$refs["detail-info"]);

      // 每次搜索之前都需要将em替换回来，不然就会出现em里面套em的情况而导致em数量一直叠加
      result.forEach(r => {
        let emReg1 = new RegExp('<highlight>', "g");
        r.innerHTML = r.innerHTML.replace(emReg1, '');
        let emReg2 = new RegExp("</highlight>", "g");
        r.innerHTML = r.innerHTML.replace(emReg2, '');
      });*/
    },
    forceRerender() {
      this.componentKey += 1;
    }
  },
  created() {
    this.getInfoById();
  },
  watch: {
    $route() {
      this.id = this.$route.query.id;
      this.editMode = this.$route.query.editMode;
      this.getInfoById();
    },
  },
  components: {
    HighLight,
    MeetingEditor,
    MultipleWebsiteEditor,
    CategorySelector,
    DirectionSelector,
    DomainSelector,
    AddressSelector,
    UploadImage,
    ToTop,
    // Header,
    Footer
  },
  computed: {
    edit() {
      return this.$router;
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #fff;
}

.detail-wrapper {
  width: 1210px;
  /*margin: 66px auto 0;*/
  padding: 66px 0;
  margin: 0 auto;
  height: 100%;
  /*overflow: hidden;*/
  display: flex;
}

/*左侧*/
.detail-wrapper .detail-nav {
  width: 380px;
  width: 210px;

  height: 900px;
  /*position: absolute;*/
  position: sticky;
  top: 80px;
  /*background-color: rgba(255, 192, 203, 0.20);*/
}

.detail-wrapper .detail-nav .detail-nav-wrapper {
  /*width: 380px;*/
  min-height: 500px;
  background: transparent;
  z-index: 33;

  position: absolute;
  right: -90px;
  top: 30px;
}


.detail-wrapper .detail-nav .expert-nav-box {
  /*padding: 42px 0 40px 40px;*/
  padding-bottom: 20px;
  background-color: #fff;
  -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
}

.detail-wrapper .detail-nav .introduce {
  display: -webkit-box;
  display: -ms-flexbox;
  /*display: flex;*/
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/*头像*/
.detail-wrapper .detail-nav .introduce .introduce-avatar {
  position: relative;
  width: 130px;
  width: 200px;
  height: 130px;
  height: 200px;
}

.detail-wrapper .detail-nav .introduce .introduce-avatar .expert-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-wrapper .detail-nav .introduce .introduce-avatar:hover .modify {
  display: inline-block;
}

.detail-wrapper .detail-nav .introduce .introduce-avatar .modify {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  cursor: pointer;
  display: none;
  padding: 10px;
  background-color: rgba(125, 125, 125, 0.71);
  color: white;
  border-radius: 4px;
  font-size: 14px;
}


.detail-wrapper .detail-nav .introduce .introduce-info {
  /*float: left;*/
  /*width: 166px;*/
  /*height: 130px;*/
  color: #364044;
  font-size: 14px;
  /*margin-left: 20px;*/
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  align-items: center;
}

.detail-wrapper .detail-nav .introduce .introduce-info .name {
  font-weight: 700;
  line-height: 20px;
  font-size: 20px;
  letter-spacing: 0;
}

.detail-wrapper .detail-nav .button {
  width: 130px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  cursor: pointer;
  -webkit-transition: all .2s;
  transition: all .2s;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
}

.detail-wrapper .detail-nav .button:hover {
  opacity: .8;
}

/*按钮1-白色*/
.detail-wrapper .detail-nav .white-button {
  border: 1px solid #55b6ea;
  color: #55b6ea;
}

/*按钮2-蓝色*/
.detail-wrapper .detail-nav .blue-button {
  background: -webkit-gradient(linear, right top, left top, from(#2b7ceb), to(#58baea));
  background: linear-gradient(270deg, #2b7ceb, #58baea);
  -webkit-box-shadow: 0 2px 8px 0 rgba(33, 161, 235, 0.3);
  box-shadow: 0 2px 8px 0 rgba(33, 161, 235, 0.3);
  color: #fff;
}

/*锚点导航*/
.detail-wrapper .detail-nav .navigater {
  margin: 36px 0 0 32px;
  width: 150px;
}

.detail-wrapper .detail-nav .navigater .detail-nav-item {
  position: relative;
  height: 38px;
}

.detail-wrapper .detail-nav .navigater .detail-nav-item .circle {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #999;
  position: relative;
  top: -2px;
  margin-right: 15px;
}

.detail-wrapper .detail-nav .navigater .detail-nav-item .line {
  width: 1px;
  height: 38px;
  background: #999;
  position: absolute;
  left: 3px;
  top: 10px;
}

.detail-wrapper .detail-nav .navigater .detail-nav-item .text {
  font-size: 14px;
  color: #999;
  letter-spacing: 4.4px;
  cursor: pointer;
}

/*导航激活状态*/
.detail-wrapper .detail-nav .navigater .detail-nav-item.active .circle {
  background: #4da2c7;
}

.detail-wrapper .detail-nav .navigater .detail-nav-item.active .text {
  color: #4da2c7;
}


/*右侧*/
.detail-wrapper .detail-info {
  width: 985px;
  background: #f5fafc;
  min-height: 1000px;
  /*position: relative;*/
  /*left: 200px;*/
  padding: 60px 0 60px 225px;
  padding: 60px 0 60px 100px;
}

.detail-wrapper .detail-info .name {
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 20px;
}

.detail-wrapper .detail-info .title {
  font-size: 16px;
  border-left: 4px solid #4da2c7;
  color: #364044;
  font-weight: 700;
  padding-left: 10px;
  margin-bottom: 33px;
}

/*基本信息*/
.detail-wrapper .detail-info .detail-info-major {
  /*min-height: 300px;*/
}

/*专业信息、个人经历*/
.detail-wrapper .detail-info .detail-info-base,
.detail-wrapper .detail-info .detail-info-meeting {
  margin-top: 52px;
  /*min-height: 400px;*/
}


.detail-wrapper .detail-info .detail-info-item .information {
  min-height: 20px;
  margin-bottom: 28px;
  overflow: hidden;
}

.detail-wrapper .detail-info .detail-info-item .information .label-p {
  display: inline-block;
  font-size: 14px;
  width: 140px;
  color: #313536;
  font-weight: 700;
  /*position: relative;*/
  top: 3px;
}

.detail-wrapper .detail-info .detail-info-item .information .info-span {
  width: 410px;
  width: 700px;
  float: right;
  margin: 0 114px 4px 0;
  margin: 0 40px 4px 0;
  color: #717576;
  line-height: 21px;
  white-space: pre-line;
  word-break: break-all;
}

.detail-wrapper .detail-info .detail-info-item .information .edit-project {
  background-color: #f56c6c2e;
  border-radius: 8px;
  padding: 8px;
}

.detail-wrapper .detail-info .info-link,
.detail-wrapper .detail-info .info-link:visited,
.detail-wrapper .detail-info .info-link:active {
  /*color: #717576;*/
  text-decoration: none;
  color: #4DA2C7;
  font-weight: 700;
  cursor: pointer;
}

.detail-wrapper .detail-info .info-link:hover {
  color: dodgerblue;
  border-bottom: 1px solid dodgerblue;
}

</style>